<template>
    <div>
        <el-upload
            ref="upload"
            name="upload_file"
            :action="props.action"          
            accept=".DOCX,.docx,.PPTX,.pptx"
            :on-success="handleSuccess"
            :file-list="fileLists"
            :headers="{token:token}"
            :limit="props.limit"
            :on-exceed="handleExceed"               
            >            
            <el-button type="primary">点击上传</el-button>
            <template #tip>
                <div class="el-upload__tip">
                    扩展名为pptx或docx，文件大小须在18M以内.
                </div>
            </template>         
        </el-upload>     
    </div>
</template>

<script setup>
import { localGet } from '@/utils'
import { reactive, ref, watch, computed } from 'vue'
import { Delete, Download, Plus, ZoomIn, EditPen,UploadFilled } from '@element-plus/icons-vue'
import { genFileId } from 'element-plus'
const props = defineProps({
    limit:{
        type:Number,
        default:5,
    },
    action:{
        type:String,
        default:'#'
    },
    
    father_method:Function
});
const upload = ref(null)

let fileLists=ref(props.fileList);
fileLists=props.fileList

const token=ref(localGet('token') || '')

const handleSuccess=(response,file,fileList)=>{
    console.log("文件上传子组件得到上传结果：",response)
    if(response.code==200){
        let list=response.data.results
        submitFileToFather(list)
    }else{
        console.log("上传失败")
    }
    
}

// 将图片文件传回给父组件
const submitFileToFather=(list)=>{
    // console.log("我要发送给父组件啦",fileLists)
    if(props.father_method)props.father_method(list)
}
// 用户选择超过规定数量的图片
const handleExceed = (files) => {
    alert("文件超出最大数量")
}

</script>

<style scoped>

</style>
